<template>
  <transition name="fade">
    <div
      class="popup-wrapper"
      :style="{
        width: `${popupWidth}px`,
        height: `${popupHeight}`,
        bottom: popupBottom,
      }"
    >
      <div :class="['popup-container', { isMobile: isMobile }]">
        <div class="popup-body">
          <div class="popup-title">
            {{ title }}
            <v-icon
              v-if="showCloseIcon"
              class="close-icon"
              name="basic_close_line"
              remote
              @click="onCancel"
            />
          </div>
          <div class="popup-content">
            <slot></slot>
          </div>
        </div>
        <div :class="['popup-btns', { isMobile: isMobile }]">
          <v-button
            v-if="showConfirmBtn"
            class="popup-confirm-btn"
            kind="primary"
            size="large"
            @click="onConfirm"
            >{{ confirmText }}</v-button
          >
          <v-button
            v-if="showCancelBtn"
            class="popup-cancel-btn"
            size="large"
            @click="onCancel"
            >{{ cancelText }}</v-button
          >
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Popup",
  components: {},
  props: {
    title: {
      type: String,
      default: "",
    },
    confirmText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    showConfirmBtn: {
      type: Boolean,
      default: true,
    },
    showCancelBtn: {
      type: Boolean,
      default: true,
    },
    showCloseIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      popupWidth: 0,
      popupHeight: 0,
      popupBottom: 0,
    };
  },
  methods: {
    onConfirm() {
      this.$emit("confirm");
    },
    onCancel() {
      this.$emit("cancel");
    },
  },
  created() {
    this.$nextTick(() => {
      this.popupWidth = this.isMobile
        ? document.body.clientWidth
        : document.querySelector(".chat-wrap__main").clientWidth;
      // this.popupHeight = this.isMobile ? document.body.clientHeight : document.querySelector('.chat-wrap__main').clientHeight;
      this.popupHeight = this.isMobile
        ? "100vh"
        : `${document.querySelector(".chat-wrap__main").clientHeight}px`;
      this.popupBottom = this.isMobile
        ? 0
        : document.querySelector(".question-input").style.bottom;
    });
  },
};
</script>

<style lang="less">
.popup-wrapper {
  position: fixed;
  margin-left: -80px;
  bottom: 55px;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 12px;
  z-index: 100;
  background: var(--color-overlay);

  .popup-container {
    position: absolute;
    bottom: 0;
    height: 82%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 16px 24px 16px;
    background: var(--color-bg-1);
    border-radius: 12px;

    &.isMobile {
      height: 72%;
    }

    .popup-title {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px;

      .close-icon {
        cursor: pointer;
      }
    }

    .popup-btns {
      display: flex;
      justify-content: center;

      .v-button {
        margin-right: var(--spacing-base-loose);
      }
    }
  }
}

.fade-enter-active {
  animation: fade 0.3s;
}

.fade-leave-active {
  animation: fade 0.3s reverse;
}

@keyframes fade {
  0% {
    transform: scale(1) translateY(200px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
</style>


